<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <a href="javascript:;">显示隐藏</a>
    <div class="box"></div>
</body>

</html>
<script>
    // 1.onclick 在用户用鼠标左键单击对象时触发。 
    document.onclick = function() {
        console.log('你触发了左键');
    };
    // 2.oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
    // document.oncontextmenu = function() {
    //     console.log('你触发了右键');
    // };


    // 3.onmousedown 当用户用任何鼠标按钮单击对象时触发,左右键和滚轮都可以触发
    // document.onmousedown = function() {
    //     console.log('你按下了鼠标按键，没有松开');
    // };
    // 4.onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。左右键和滚轮都可以触发
    // document.onmouseup = function() {
    //     console.log('你松开了鼠标按键');
    // };

    // 5.onmousemove 当用户将鼠标划过对象时触发。(鼠标移动时触发) - 频率很高
    // var num = 0;
    // document.onmousemove = function() {
    //     num++;
    //     console.log(num);
    // };

    // 6.onmouseover 当用户将鼠标指针移动到对象内时触发。
    // 7.onmouseout 当用户将鼠标指针移出对象边界时触发。
    // var oA = document.querySelector('a');
    // var oBox = document.querySelector('.box');
    // oA.onmouseover = function() {
    //     oBox.style.display = 'block';
    // };

    // oA.onmouseout = function() {
    //     oBox.style.display = 'none';
    // };

    // 8.onkeydown 当用户按下键盘按键时触发。
    // document.onkeydown = function() {
    //     console.log('按下键盘按键');
    // };
    // 9.onkeyup 当用户释放键盘按键时触发。
    // document.onkeyup = function() {
    //     console.log('释放键盘按键');
    // };
</script>